<template>
  <div class="father">
    <h3>父组件【$attr适用于祖给孙传递数据，需要借助父组件】</h3>
    <h4>父组件的数据 a：{{ a }}</h4>
    <h4>父组件的数据 b：{{ b }}</h4>
    <h4>父组件的数据 c：{{ c }}</h4>
    <h4>父组件的数据 d：{{ d }}</h4>
    <Child :a="a" :b="b" :c="c" :d="d" v-bind="{ x: 100, y: 200 }" :updateA="updateA" />
  </div>
</template>

<script setup lang="ts" name="Father">
import Child from './Child.vue'
import { ref } from 'vue'

let a = ref(1)
let b = ref(2)
let c = ref(3)
let d = ref(4)

// 祖先组件可以将方法也传递给孙组件，此时孙组件操作该方法就可以在祖先组件的方法里面操作响应的数据，实现子组件给祖先组件传递数据
function updateA(value: number) {
  a.value += value
}
</script>

<style scoped>
.father {
  background-color: rgb(165, 164, 164);
  padding: 20px;
  border-radius: 10px;
}
</style>
